<template>
	<div >
			<div v-if="!isUpdate" @click="changeActive()">
				<div v-show="!isActive">
					QQ:{{item.QQ}}<br/>
					CN:{{item.nickName}}<br/>
				</div>
				<div v-show="isActive">
					QQ:{{item.QQ}}<br/>
					CN:{{item.nickName}}<br/>
					性别:{{item.sex | showSex}}<br/>
					年级:{{item.year | showYear}}<br/>
					学院:{{$store.state.colleges[item.college]}}<br/>
					专业:{{item.major}}<br/>
					部门:{{$store.state.departments[item.department]}}<br/>
					爱好:{{item.hobbies}}<br/>
					<p style="word-wrap: break-word;">寄语:<br/>{{item.expect}}</p><br/>
					<div v-show="isContral">
						<input @click.stop="updateBtn()" type="button" class="btn-xs btn-primary col-xs-2 col-xs-offset-6" value="修改">
						<input @click.stop="deleteBtn()" type="button" class="btn-xs btn-danger col-xs-2 col-xs-offset-1" value="删除">
					</div>
				</div>
			</div>
			<div v-else>
				<form @submit.prevent="submitUpdate" method="post" class="form-horizontal">
					<input type="text" :value="item.QQ" v-model="updateForm.QQsrc" required="required" style="display: none;">
					<label>QQ<input type="text" :value="item.QQ" v-model="updateForm.QQ" required="required"></label>
					<label>CN<input type="text" v-model="updateForm.nickName" required="required"></label>
					<br>
					<label for="year">年级
						<select :value="item.year" v-model="updateForm.year" required="required">
							<option v-for="item in curYear" :value="item">{{item}}届</option>
						</select>
					</label>
					<br>
					<label for="college">学院
						<select :value="item.college" v-model="updateForm.college" required="required">
							<option v-for="(item,index) in $store.state.colleges" :value="index">{{item}}</option>
						</select>
					</label>
					<br>
					<label>专业<input type="text" v-model="updateForm.major" :value="item.major"></label>
					<br>
					<label for="department">部门
						<select :value="item.department" v-model="updateForm.department" required="required">
							<option v-for="(item,index) in $store.state.departments" :value="index">{{item}}</option>
						</select>
					</label>
					<br>
					<input type="button" class="btn-xs btn-info col-xs-offset-7" @click="cancel()" value="取消">
					<input type="submit" class="btn-xs btn-primary col-xs-offset-1" value="确认修改">
				</form>
			</div>
			
			<br/><hr>
	</div>
</template>

<script>
	export default {
		props:{
			item:{
				type:Object,
				default(){
					return {}
				}
			},
			isActive:{
				type:Boolean,
				default(){
					return false
				}
			},
			isContral:{
				type:Boolean,
				default(){
					return false
				}
			}
		},
		data() {
			return {
				isUpdate: false,
				curYear: [],
				updateForm:{
					QQsrc: this.item.QQ,
					QQ: this.item.QQ,
					nickName:this.item.nickName,
					year:this.item.year,
					college:this.item.college,
					major:this.item.major,
					department:this.item.department
				}
			}
		},
		methods:{
			changeActive(){
				this.isActive = !this.isActive
			},
			deleteBtn(){
				let sure = confirm("警告！删除后数据无法恢复！")
				if(sure){
					const xhr = new XMLHttpRequest()
					xhr.onload = () =>{
						if(JSON.parse(xhr.responseText).state == 200){
							alert(JSON.parse(xhr.responseText).message)
							this.fatherGetInfo()
						}
					}
					xhr.open('POST','/deleteOne')
					xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
					xhr.send("QQ="+this.item.QQ)
				}
			},
			fatherGetInfo(){
				this.$parent.fatherGetInfo()
			},
			updateBtn(){
				this.isUpdate = true,
				this.getDate()
			},
			cancel(){
				this.isUpdate = false
			},
			getDate(){
				let date = new Date
				let year = date.getFullYear()
				while(year > 2009){
					this.curYear.push(year--)
				}
			},
			submitUpdate(){
				let sure = confirm("确定要提交修改吗")
				if(!sure){
					return
				}
				const xhr = new XMLHttpRequest()
				xhr.onload = ()=>{
					console.log(JSON.parse(xhr.responseText))
					if(JSON.parse(xhr.responseText).state == 200){
						alert(JSON.parse(xhr.responseText).message)
						this.$parent.searchSubmit()
					}
				}
				xhr.open('POST','/updateOne')
				xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
				xhr.send(
					"QQsrc="+this.updateForm.QQsrc+
					"&QQ="+this.updateForm.QQ+
					"&nickName="+this.updateForm.nickName+
					"&year="+this.updateForm.year+
					"&college="+this.updateForm.college+
					"&major="+this.updateForm.major+
					"&department="+this.updateForm.department
				)
			}
		},
		filters:{
			showSex(val){
				if(val == 0){
					return '男'
				}else{
					return '女'
				}
			}
		}
	}
</script>

<style>
</style>
